<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  
  
  <title>  写夜子的个人博客 </title>

 
  
    <link rel="icon" href="/images/favicon.png">
  


  <link rel="stylesheet" href="/nayo.min.css"> 
</head>  
  <body>   
    
      <header class="header">
	
  <nav class="header-nav">        
   
    <span class="iconfont icon-menu mobile-toggle"></span>   	

    <div class="header-menu">          
              
            
              <a class="header-menu-link" id="header-menu-home" href="/">首页</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-archives" href="/archives">归档</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-tags" href="/tags">标签</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-about" href="/about">关于</a>     
            
            
            
              <a class="iconfont icon-menu-search header-menu-link" id="header-menu-search"></a>
            
                
    </div>  
    
  </nav>
</header>   

      <div class="container">       
          
          
            <section class="main">  
          

          




<div class="profile sildeUpMin">
	
		<a href="/">
			<img class="avatar" src="http://wx2.sinaimg.cn/mw690/89296167gy1fu5ph67x17j21kw1kwhdu.jpg">
		</a>
		<p class="author">写夜子</p>
		
		<div class="social">
   		      		
			<a target="_blank" class="social-links" href="https://github.com/xieyezi">		
				<i class="iconfont icon-Github"></i>
			</a>	
	          		
			<a target="_blank" class="social-links" href="https://weibo.com/2301190503/profile?rightmod=1&wvr=6&mod=personinfo">		
				<i class="iconfont icon-Weibo"></i>
			</a>	
	          		
			<a target="_blank" class="social-links" href="https://www.facebook.com/profile.php?id=100022240804629">		
				<i class="iconfont icon-Facebook"></i>
			</a>	
	          		
			<a target="_blank" class="social-links" href="https://twitter.com/xieyezi">		
				<i class="iconfont icon-Twitter"></i>
			</a>	
	          		
			<a target="_blank" class="social-links" href="https://www.instagram.com/_xieyezi_/">		
				<i class="iconfont icon-Instagram"></i>
			</a>	
	    
    	</div>		
</div>


    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/09/02/Vue路由的基本加载/">路由的基本加载</a>

		 

		<div class="article-meta">
			<time>9月 02, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="Vue-Router"><a href="#Vue-Router" class="headerlink" title="Vue Router"></a>Vue Router</h3><p>  Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>
<ul>
<li>嵌套的路由/视图表</li>
<li>模块化的、基于组件的路由配置</li>
<li>路由参数、查询、通配符</li>
<li>基于 Vue.js 过渡系统的视图过渡效果
		
	</li></ul></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/09/02/Vue路由的基本加载/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/08/30/Vue使用axios的get和post请求/">Vue使用axios的get和post请求</a>

		 

		<div class="article-meta">
			<time>8月 30, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="安装axios"><a href="#安装axios" class="headerlink" title="安装axios"></a>安装axios</h3><p>  <a href="https://www.kancloud.cn/yunye/axios/234845" target="_blank" rel="noopener">Axios</a> 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.</p>
<ul>
<li>从浏览器中创建 XMLHttpRequests</li>
<li>从 node.js 创建 http 请求</li>
<li>支持 Promise API
		
	</li></ul></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/08/30/Vue使用axios的get和post请求/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/08/24/Mac安装Vue.js devtools插件无法使用的解决方法/">Mac安装Vue.js devtools插件无法使用的解决方法</a>

		 

		<div class="article-meta">
			<time>8月 24, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
						<a class="article-tag" href="/tags/Chrome/">Chrome</a>
				
						<a class="article-tag" href="/tags/插件/">插件</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="Mac安装Vue-js-devtools插件无法使用？"><a href="#Mac安装Vue-js-devtools插件无法使用？" class="headerlink" title="Mac安装Vue.js devtools插件无法使用？"></a>Mac安装Vue.js devtools插件无法使用？</h3><p>  在Mac os的谷歌浏览器里面安装插件<a href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd" target="_blank" rel="noopener">vue.js devtools</a>之后,发现启动vue项目之后,我们无法使用的情况：<br>
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/08/24/Mac安装Vue.js devtools插件无法使用的解决方法/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/08/22/Vue过渡与动画/">Vue过渡与动画</a>

		 

		<div class="article-meta">
			<time>8月 22, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h3><p>  Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.<br>  包括以下工具：</p>
<ul>
<li>在 CSS 过渡和动画中自动应用 class</li>
<li>可以配合使用第三方 CSS 动画库，如 Animate.css
		
	</li></ul></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/08/22/Vue过渡与动画/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/08/14/Vue插槽与缓存/">Vue插槽与缓存</a>

		 

		<div class="article-meta">
			<time>8月 14, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h3><p>  利用插槽,父组件可以向子组件里面注入内容.<br>  注：插槽的视图部分的样式由父组件决定,子组件决定数据.也就是说是子组件给父组件传递数据.<br>  插槽的类型有：</p>
<ul>
<li><p>单个插槽的使用<br>父组件：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">Child</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是插槽<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">Child</span>&gt;</span></span><br></pre></td></tr></table></figure>
		
	</li></ul></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/08/14/Vue插槽与缓存/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/08/14/子组件和父组件通信/">Vue子组件如何向父组件通信？</a>

		 

		<div class="article-meta">
			<time>8月 14, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="Vue子组件向父组件传递信息"><a href="#Vue子组件向父组件传递信息" class="headerlink" title="Vue子组件向父组件传递信息"></a>Vue子组件向父组件传递信息</h3><p>  1.子组件通过自定义事件(emit Event)向父组件传递信息<br>  2.传递步骤及方法</p>
<ul>
<li><p>先在子组件中自定义一个方法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">name</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"sendMsg"</span>&gt;</span>发送数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">//自定义了一个sendMsg的方法</span><br></pre></td></tr></table></figure>
		
	</li></ul></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/08/14/子组件和父组件通信/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/08/12/Vue组件/">Vue组件</a>

		 

		<div class="article-meta">
			<time>8月 12, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="Vue组件"><a href="#Vue组件" class="headerlink" title="Vue组件"></a>Vue组件</h3><p>  组件是Vue.js最核心的功能之一,组件可以扩展HTML元素,封装可重用的代码.<br>  所以的组件都是Vue的一个实例.<br>  一个单组件分为三部分：</p>
<ul>
<li>template(HTML部分)</li>
<li>script(逻辑部分)</li>
<li><p>style(样式部分)   </p>
		
	</li></ul></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/08/12/Vue组件/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/08/11/回到Hexo/">回到Hexo</a>

		 

		<div class="article-meta">
			<time>8月 11, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/经验总结/">经验总结</a>
				
						<a class="article-tag" href="/tags/感悟/">感悟</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="重新回到Hexo"><a href="#重新回到Hexo" class="headerlink" title="重新回到Hexo"></a>重新回到Hexo</h3><p>  兜兜转转，还是回到了<a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">Hexo</a>+<a href="https://github.com/" target="_blank" rel="noopener">GitHub</a>的怀抱.<br>  别问我为什么,因为很专业（免费）😏！</p>
<h3 id="技术博客的重要性"><a href="#技术博客的重要性" class="headerlink" title="技术博客的重要性"></a>技术博客的重要性</h3><p>  因为近来经常面试的原因,发现外面的公司大都会优先考虑有技术博客或者GitHub的学生.<br>  例如<br>  <img src="http://wx1.sinaimg.cn/large/89296167gy1fu5ngjns3lj21kw0pewk7.jpg" alt="Github需求" title="GitHub需求"><br>
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/08/11/回到Hexo/">阅读更多</a>
	</div>

</article>
     
     	



 
   <nav class="paginator">
    
        <a class="prev" href="/page/4/"> 
        <i class="iconfont icon-left"></i>
        上一页
        </a>
    

   <span class="page-number"> Page <strong>5</strong>. </span>

    
  </nav> 

          </section> 
      </div>            
    
    <a id="backTop">
      <span>
        <i class="iconfont icon-backtotop"></i>
      </span>
    </a> 

  
    
    <div class="search-container sildeUpMin">
        <div class="search-header">
            <input type="text" placeholder="输入你想搜索的" id="search-input" class="search-input">  
            <span class="search-cancel iconfont icon-cancel"></span>
        </div>
        <div id="search-result" class="search-result"></div>
    </div>
 
     <div class="mobile-menu">      

      
      <img class="mobile-menu-icon" src="/images/favicon.png">   
      

         
            

            <a class="mobile-menu-link" href="/">首页
            </a>
            
         
            

            <a class="mobile-menu-link" href="/archives">归档
            </a>
            
         
            

            <a class="mobile-menu-link" href="/tags">标签
            </a>
            
         
            

            <a class="mobile-menu-link" href="/about">关于
            </a>
            
         
                          

            <a class="mobile-menu-link mobile-menu-search" href="#">搜索 </a>                 
            
         
      
</div>        
    


<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?636802045446222199ae541e32c8133e"; 
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>





     
    




<footer id="footer">


		<div class="footer-copyright">
		&copy;
		
		2018-
		
		2020

		Xieyezi
		<br>

		Copyright
		<a href="https://github.com/xieyezi" target="_blank">Xieyezi</a>
		</div>

</footer>
   

  

    <script src="/nayo.bundle.js"></script>           
  </body>        
</html>